<style lang="scss" scoped>
.operate-exam-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .exam-form {
        padding-right: 10px;
    }
    .exam-form ::v-deep {
        .el-date-editor.el-input {
            width: 100% !important;
        }
        .editor-custom-btn-container {
            display: none;
        }
        .tinymce-container {
            margin: 0 !important;
        }
    }
    .title {
        font-size: 18px;
    }

    .row-bg {
        margin: 30px 0 30px 0;
    }
}
</style>
<template>
    <div class="operate-exam-container">
        <div style="height: 30px">
            <el-breadcrumb style="float: left" separator="/">
                <el-breadcrumb-item :to="{ path: '/groupRegistration' }">
                    <span @click="reback()">{{ $t('竞赛报名') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ '团体报名' }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card
            style="padding: 0 !important"
            shadow="never"
            v-loading="loading"
            body-style="padding: 24px;"
        >
            <el-row type="flex" class="row-bg" justify="space-between">
                <h2 style="color: #101010; font-weight: bold">{{ $t('团体报名') }}</h2>
                <el-button @click="reback">{{ $t('requirement.back') }}</el-button>
            </el-row>
            <hr style="border-top: 2px solid #eee" />
            <el-form
                ref="addform"
                :model="queryForm"
                label-width="170px"
                label-position="top"
                :rules="rulesForm"
                label-suffix="："
            >
                <el-row :gutter="24">
                    <!-- 竞赛项目名称 -->
                    <el-col :span="18">
                        <el-form-item :label="$t('竞赛作品名称')" prop="workName">
                            <el-input
                                clearable
                                v-model="queryForm.workName"
                                width="100%"
                                maxlength="64"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <!-- 竞赛级别 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('指导老师')" prop="teacher">
                            <el-select
                                v-model="queryForm.teacher"
                                clearable
                                multiple
                                filterable
                                remote
                                maxlength="32"
                                reserve-keyword
                                :remote-method="remoteMethodOne"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.approver"
                                    :key="item.code"
                                    :label="item.codeAndName"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :getter="24">
                    <el-col :span="24">
                        <el-form-item :label="$t('竞赛作品简介')" prop="introduction">
                            <el-input
                                type="textarea"
                                :placeholder="
                                    $t('请输入（需要提交作品简介、创新点、社会价值等。）')
                                "
                                v-model="queryForm.introduction"
                                :maxlength="500"
                                :rows="7"
                                show-word-limit
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="6" v-if="options.subName.length>0">
                        <el-form-item label="竞赛小类" prop="subName">
                            <el-select v-model="queryForm.subName" clearable style="width: 100%">
                                <el-option
                                    v-for="item in options.subName"
                                    :key="item.id"
                                    :label="item.subName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" style="margin: 30px 0 10px 0; float: right">
                    <el-button type="primary" @click="exportAdd">
                        {{ $t('graduate.add') }}
                    </el-button>
                </el-row>
                <el-form :model="academicAchieveTable" ref="academicAchieveTable">
                    <edu-table
                        :pagination="false"
                        :tooltipEffect="tooltipEffect"
                        :selection="false"
                        stripe
                        :data="academicAchieveTable.studentList"
                        size="mini"
                    >
                        <edu-table-column prop="isLeader">
                            <template slot-scope="scope">
                                <!-- <el-form-item
                                    style="margin-top: 15px"
                                    :prop="'studentList.' + scope.$index + '.isLeader'"
                                    label-width="0"
                                    :rules="rulesForm.isLeader"
                                > -->
                                    <!-- <el-radio v-model="radio" :label="scope.$index">
                                        设置队长
                                    </el-radio> -->
                                    <el-radio
                                        v-model="radio"
                                        :label="scope.row.uniqueId"
                                        @change.native="getTemplateRow(scope.$index, scope.row)"
                                    >
                                        {{ $t('registrationList.setLeader') }}
                                    </el-radio>
                                <!-- </el-form-item> -->
                            </template>
                        </edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.studentNumber')"
                            prop="studentId"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px"
                                    :prop="'studentList.' + scope.$index + '.studentId'"
                                    label-width="0"
                                    :rules="rulesForm.studentId"
                                >
                                    <el-select
                                        v-model="scope.row.studentId"
                                        filterable
                                        remote
                                        maxlength="64"
                                        reserve-keyword
                                        @change="(value) => changeInput(value, scope.$index)"
                                        :remote-method="remoteMethodTwo"
                                        style="width: 100%"
                                        v-clearreadonly
                                    >
                                        <el-option
                                            v-for="item in options.studentList"
                                            :key="item.code"
                                            :label="item.codeAndName"
                                            :value="item.code"
                                        >
                                            <span>{{ item.codeAndName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </template>
                        </edu-table-column>
                        <edu-table-column :label="$t('姓名')" prop="studentName">
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px"
                                    :prop="'studentList.' + scope.$index + '.studentName'"
                                    label-width="0"
                                    :rules="rulesForm.studentName"
                                >
                                    <el-input
                                        v-model.trim="scope.row.studentName"
                                        clearable
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>
                        <edu-table-column
                            :label="$t('interdisciplinaryManagement.phoneNumber')"
                            prop="telephone"
                        >
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px"
                                    :prop="'studentList.' + scope.$index + '.telephone'"
                                    label-width="0"
                                    :rules="rulesForm.telephone"
                                >
                                    <el-input
                                        v-model.trim="scope.row.telephone"
                                        clearable
                                        maxlength="11"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>
                        <edu-table-column :label="$t('邮箱')" prop="mail">
                            <template slot-scope="scope">
                                <el-form-item
                                    style="margin-top: 15px"
                                    :prop="'studentList.' + scope.$index + '.mail'"
                                    label-width="0"
                                    :rules="rulesForm.mail"
                                >
                                    <el-input
                                        v-model.trim="scope.row.mail"
                                        clearable
                                        maxlength="64"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </edu-table-column>
                        <!-- <edu-table-column :label="$t('邮箱')" prop="mail"></edu-table-column> -->
                        <edu-table-column :label="$t('academicForum.operate')" fit width="150">
                            <template slot-scope="props">
                                <el-button
                                    type="text"
                                    @click="deleteReport(props.row, props.$index)"
                                >
                                    {{ $t('academicForum.delete') }}
                                </el-button>
                                <!-- <el-button type="text" @click="deteOutline(props.row)">
                                    {{ $t('保存') }}
                                </el-button> -->
                            </template>
                        </edu-table-column>
                    </edu-table>
                </el-form>
                <el-row type="flex" class="row-bg" justify="center">
                    <el-button type="primary" @click="conserve">
                        {{ $t('报名') }}
                    </el-button>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
import interManagementApi from 'common/src/api/externalExchange/interdiSciplinaryManagement'
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import forumProject from 'common/src/api/academicForums/forumProject'
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'

export default {
    props: {
        dataSignUp: {
            type: Object,
        },

        // dataList: {
        //     type: Object,
        //     default: () => {},
        // },
    },
    data() {
        // 校验手机号码
        let validateNum = (rule, value, callback) => {
            let regExp = /^1[23456789]\d{9}$/
            if (!regExp.test(value)) {
                callback(new Error(this.$t('projectApplication.validateStudentPhone')))
            } else {
                callback()
            }
        }
        // 验证电子邮箱
        let validateNumEmail = (rule, value, callback) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('interdisciplinaryManagement.pleaseEnter')))
            }
            return callback()
        }

        let cannotEnter = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback(new Error(this.$t('internship.pleaseEnter')))
            }
            return callback()
        }
        return {
            radio: '',
            queryForm: {
                workName: '',
                teacher: '',
                introduction: '',
                subName: ''
            },
            academicAchieveTable: {
                studentList: [],
            },
            editModel: false,
            oneSubjects: [],
            options: {
                englisNameSchool: [],
                nameSchool: [],
                approver: [],
                studentList: [],
                regionList: [],
                oneSubjects: [],
                subName: []
            },
            rulesForm: {
                // workName: [
                //     { required: true, message: this.$t('请输入竞赛作品名称'), trigger: 'change' },
                // ],
                // teacher: [
                //     {
                //         required: true,
                //         message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                //         trigger: 'change',
                //     },
                // ],
                // introduction: [
                //     {
                //         required: true,
                //         message: this.$t('请输入（需要提交作品简介、创新点、社会价值等。）'),
                //         trigger: 'blur',
                //     },
                // ],
                studentId: [{ required: true, message: this.$t('请输入学号'), trigger: 'change' }],
                studentName: [
                    { required: true, message: this.$t('请输入姓名'), trigger: 'change' },
                ],
                telephone: [{ required: true, validator: validateNum, trigger: 'change' }],
                mail: [{ required: true, validator: validateNumEmail, trigger: 'change' }],
                subName: [{ required: true, message: '请选择竞赛小类' , trigger: 'change' }]
            },
        }
    },
    computed: {
        // params() {
        //     return {
        //         ...this.dataSignUp,
        //         signRecordDTO: {
        //             workName: this.queryForm.workName,
        //             teacher: this.queryForm.teacher,
        //             introduction: this.queryForm.introduction,
        //             studentList: [
        //                 {
        //                     studentId: this.academicAchieveTable.studentList.studentId,
        //                     studentName: this.academicAchieveTable.studentList.studentName,
        //                     isLeader: this.academicAchieveTable.studentList.isLeader,
        //                     telephone: this.academicAchieveTable.studentList.telephone,
        //                     mail: this.academicAchieveTable.studentList.mail,
        //                 },
        //             ],
        //         },
        //     }
        // },
    },
    created() {},
    mounted() {
        this.getsubName()
        this.getOptions()
    },
    methods: {
        // 根据竞赛id获取竞赛小类集合
        getsubName() {
            let jsId = this.dataSignUp.competitionId // 获得竞赛id
            comRegistration.getSubCompetitions(jsId).then(res => {
                this.options.subName = res.data
            })
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE', 'G_GJQU'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU', // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },

        rowClick(row, event, column) {
            this.academicAchieveTable.studentList.isLeader = row.indexs
        },
        // 设置队长
        getTemplateRow(index, row) {
            this.academicAchieveTable.studentList.forEach((item) => {
                if (item.isLeader === 1) {
                    item.isLeader = null
                }
            })
            this.$set(row, 'isLeader', 1)
        },
        cancelOperate() {
            this.$refs['addform'].resetFields()
        },
        validateWeight(rule, value, callback) {
            let expReg = /^([0-9]{1,32})(\.\d{1,4})?$/
            if (!value) {
                callback(new Error(this.$t('请输入专项经费')))
            } else if (!expReg.test(value)) {
                callback(new Error(this.$t('请输入大于0的数字,最多四位小数')))
            } else {
                callback()
            }
        },

        reback() {
            this.$emit('change-exam')
        },

        // 老师改变获取数据
        remoteMethodOne(query) {
            if (!!query) {
                comRegistration
                    .getTeacherInfo({
                        condition: {
                            codeOrName: query,
                        },
                        pageSize_: 100,
                        pageNum_: 0,
                    })
                    .then((res) => {
                        if (res && res.code == 200) {
                            this.options.approver = res.data.list
                        }
                    })
            } else {
                this.options.approver = []
            }
        },
        // 学号改变获取数据
        remoteMethodTwo(query) {
            if (!!query) {
                setTimeout(() => {
                    comRegistration
                        .getStudentInfo({
                            pageNum_: 0,
                            pageSize_: 100,
                            condition: {
                                codeOrName: query,
                            },
                        })
                        .then((res) => {
                            this.options.studentList = res.data.list
                        })
                }, 200)
            } else {
                this.options.studentList = []
            }
        },
        // 学号改变获取数据
        changeInput(val, index) {
            this.options.studentList = []
            let _this = this
            if (val) {
                let parm = {
                    pageNum_: 0,
                    pageSize_: 100,
                    condition: {
                        codeOrName: val,
                    },
                }
                comRegistration.getStudentInfo(parm).then((res) => {
                    _this.$set(_this.academicAchieveTable.studentList[index], 'studentId', res.data.list[0].code)
                    _this.$set(_this.academicAchieveTable.studentList[index], 'studentName', res.data.list[0].name)
                    _this.$set(_this.academicAchieveTable.studentList[index], 'isLeader', res.data.list[0].isLeader)
                    _this.$set(_this.academicAchieveTable.studentList[index], 'telephone', res.data.list[0].telephone)
                    _this.$set(_this.academicAchieveTable.studentList[index], 'mail', res.data.list[0].mail)
                        // studentId: res.data.list[0].code,
                        // studentName: res.data.list[0].name,
                        // isLeader: res.data.list[0].isLeader,
                        // telephone: res.data.list[0].telephone,
                        // mail: res.data.list[0].mail,
                })
            } else {
                this.academicAchieveTable.studentList = []
            }
        },
        // 新增行
        exportAdd(val) {
            this.academicAchieveTable.studentList.push({

                uniqueId: new Date().getTime(),
            })
        },
        // 删除行
        deleteReport(row, index) {
            let _this = this
            _this.academicAchieveTable.studentList.splice(index, 1)
        },
        cancelClose() {
            this.$refs['addform'].resetFields()
            for (const key in this.queryForm) {
                if (key == 'studentList') {
                    this.queryForm.studentList = []
                } else {
                    this.queryForm[key] = ''
                }
            }
        },
        // 保存
        conserve() {
            this.$refs['addform'].validate((valid) => {
                this.$refs['academicAchieveTable'].validate((tableValid) => {
                    if (valid && tableValid) {
                        this.dataSignUp.subId = this.queryForm.subName?this.queryForm.subName:null
                        let params = {
                            ...this.dataSignUp,
                            signRecordDTO: {
                                workName: this.queryForm.workName,
                                teacher: this.queryForm.teacher.join(','),
                                introduction: this.queryForm.introduction,
                                studentList: [],
                            },
                        }
                        this.academicAchieveTable.studentList.forEach((val) => {
                            params.signRecordDTO.studentList.push({
                                studentId: val.studentId,
                                studentName: val.studentName,
                                isLeader: val.isLeader,
                                telephone: val.telephone,
                                mail: val.mail,
                            })
                        })
                        comRegistration.signUp(params).then((res) => {
                            this.$message.success(this.$t('internship.successfully'))
                            this.$emit('change-exam', 1)
                            this.$refs['addform'].resetFields()
                        })
                    }
                })
            })
        },
    },
}
</script>
